<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="Pragma" content="no-cache"> 
    <meta http-equiv="Cache-Control" content="no-cache"> 
    <meta http-equiv="Expires" content="0"> 
    <title>登录页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css"/>

    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrapValidator.min.js"></script>
    <script type="text/javascript" src="js/bootstrapValidator.zh_CN.js"></script>
    <script type="text/javascript">

    $(function () {
/*
        $('#loginForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            userName: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    },
                    remote: {
                        type: 'POST',
                        url: '/api/v1/user/isExist',  // 调用后台接口验证该用户名是否可用
                        message: 'The username is not available'
                    },
                    different: {
                        field: 'password,confirmPassword',
                        message: 'The username and password cannot be the same as each other'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required and cannot be empty'
                    },
                    identical: {
                        field: 'confirmPassword',
                        message: 'The password and its confirm are not the same'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            }
           
        }
    });
 */   

    $("#login").click(function(){
                // 请求数据体
                var requestData = {					
                    'loginName' : $('#loginName').val(), // 通过id查找标签元素，val()获取该标签元素的值
                    'password' : $('#password').val(),
                };

                $.ajax({
                    url:"/api/v1/userlogin",
                    type:"POST",
                    data: requestData,
                    success:function(d){ // 请求成功时执行的回调函数，d: 返回数据(json格式)
                        //alert("ok")
                        if(d['status']==500){
                            alert(d['message']);
                        }
                        if(d['status']==200){
//                            alert(d);
                            alert("登录成功");
                            window.location.href="home.html";
                        }
                    },
                    error:function(){}, // 同理，请求失败执行的回调函数
                    dataType:"json" // 返回数据的格式 json
                });
     });

     $("#register").click(function(){
         window.location.href="register.html";
     });
});

    </script>
</head>

<body>
    <div class="login_box">
        <div class="login_1_img"><img src="img/login_img.png" /></div>
            <div class="login">
                <div class="login_logo"><a href="#"><img src="img/login_logo.png" /></a></div>
                    <div class="login_name">
                        <p>广东海洋大学体育馆管理系统</p>
                    </div>

                <form id="loginForm">
                    <div class="form-group">
                        <div id="userNameText">
                            <input id="loginName" name="userName" type="text" value="用户名" onfocus="this.value=''" onblur="if(this.value==''){this.value='用户名'}">
                        </div>
                        <div id="passwordText">
                            <span id="password_text" onclick="this.style.display='none';document.getElementById('password').style.display='block';document.getElementById('password').focus().select();" >密码</span>
                            <input id="password" name="password" type="password" style="display:none;" onblur="if(this.value==''){document.getElementById('password_text').style.display='block';this.style.display='none'};"/>
                        </div>
                        <div>
                            <input id="login" value="登录" style="width:45%" type="button" />
                            <input id="register" value="注册" style="width:45%" type="button" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
